<!-- 页面 -->
<template>
    <div class="sou">
        <van-nav-bar @click-left="tui()" title="优购商城" style="background: red;" left-arrow />
        <van-cell-group>
            <van-field style="width: 250px;" class="inp" v-model="value" /> <van-button class="an" @click="soude()"
                type="primary">搜索</van-button>
        </van-cell-group>
        <van-row style="height: 200px;" v-for="(item,index) in list" :key="index">
            <van-col span="8"><img :src=item.goods_small_logo alt=""></van-col>
            <van-col span="16">
                <p>{{ item.goods_name }}</p>
                <br>
                <p>{{ item.goods_price }}</p>
            </van-col>
        </van-row>
    </div>
</template>
<!-- vue -->
<script>
export default {
    data() {
        return {
            // 声明的属性
            value: '',
            list: [],
        }
    },
    //生命周期函数
    mounted() {
    },
    // 调用方法
    methods: {
        tui() {
            this.$router.go(-1)
        },
        soude() {
            this.$axios.get('https://api-hmugo-web.itheima.net/api/public/v1/goods/search', {
                params: {
                    query: this.value
                }
            }).then(res => {
                console.log(res);
                this.list = res.data.message.goods
                console.log(this.list);
            })
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.sou {
    width: 100vw;
    height: 100vh;
    background: #f4f4f4;
}

.sou .an {
    float: right;
    background: #ccc;
    margin-top: 12px;
    margin-right: 15px;
    border: 0;
    color: black;
}

.sou .inp {
    float: left;
    height: 50px;
    margin: auto;
    margin-top: 10px;
    margin-left: 50px;
}
.sou img{
    width: 100%;
}
</style>
